<template>
    <div>
        <van-sticky>
            <van-nav-bar style="background-color: rgb(12, 177, 173)" title="我的">
                <template #right>
                    <van-icon name="setting-o" size="25" color="white" @click="logout" />
                </template>
            </van-nav-bar>
        </van-sticky>
        <div class="user_info">
            <div class="user_container">
                <div class="user_top">
                    <van-image fit="cover" round width="4rem" height="4rem"
                        src="https://img01.yzcdn.cn/vant/cat.jpeg" />
                    <div class="lorR" v-if="info">{{userInfo.ret.username}}</div>
                    <div class="lorR" v-else><a href="#/Login">登录</a><a href="#/Login">/注册</a></div>
                    <div class="user_right">
                        <p>会员积分 50</p>
                    </div>
                </div>
                <div class="vip">
                    <div class="vip_left">
                        <div class="level">
                            V1
                        </div>
                        <span>0</span><span>成长值</span>
                    </div>
                    <div class="vip_right">
                        <span>海信会员</span><span>享更多优惠</span>
                        <button>会员权益</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="list nogray">
            <div class="list_container">
                <p>
                    <span>我的订单</span><span>全部订单
                        <van-icon name="arrow" />
                    </span>
                </p>
                <van-grid :column-num="5" :border="false" :gutter="0">
                    <van-grid-item icon="paid" text="待付款" />
                    <van-grid-item icon="send-gift-o" text="待发货" />
                    <van-grid-item icon="logistics" text="待收货" />
                    <van-grid-item icon="comment-o" text="待评价" />
                    <van-grid-item icon="after-sale
" text="退货/售后" />
                </van-grid>
            </div>
        </div>
        <div class="list nogray">
            <div class="list_container">
                <p><span>我的订单</span></p>
                <van-grid :border="false" :gutter="0">
                    <van-grid-item icon="coupon-o" text="H码专享" />
                    <van-grid-item icon="other-pay" text="我的优惠券" />
                    <van-grid-item icon="star-o" text="我的活动" />
                    <van-grid-item icon="point-gift-o" text="积分兑换" />
                    <van-grid-item icon="shop-o
        " text="积分商域" />
                    <van-grid-item icon="aim
                " text="我的足迹" />
                </van-grid>
            </div>
        </div>
        <div class="list gray">
            <div class="list_container">
                <p><span>自助服务</span></p>
                <van-grid :border="false" :gutter="0">
                    <van-grid-item icon="label-o" text="发票查询" />
                    <van-grid-item icon="notes-o" text="发票管理" />
                    <van-grid-item icon="location-o" text="收货地址" />
                    <van-grid-item icon="notes-o" text="活动公告" />
                </van-grid>
            </div>
        </div>
        <div class="list gray">
            <div class="list_container">
                <p><span>联系我们</span></p>
                <van-grid :border="false" :gutter="0">
                    <van-grid-item icon="question-o" text="常见问题" />
                    <van-grid-item icon="smile-comment-o" text="在线客服" />
                    <van-grid-item icon="phone-circle-o" text="售后热线" />
                    <van-grid-item icon="records" text="意见反馈" />
                </van-grid>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "Mine",
        data() {

            return {
                info: false,
            }
        },
        computed: {
            userInfo() {
                //   return this.$store.state.userInfo;
                return this.$store.state.user.userInfo;

            },


        },
        methods: {
            logout() { },
        },
        created() {
            let userInfo = JSON.parse(localStorage.getItem("userInfo")) || [];
            this.info = true
            this.$parent.showTabbar = true;
            console.log(this.userInfo);

        },
        updated() {

        }
    };
</script>
<style lang='scss'>
    body {
        background-color: rgb(247, 247, 247);
    }

    .user_info {
        background-color: rgb(12, 177, 173);
    }

    .user_container {
        display: flex;
        flex-direction: column;
    }

    .user_container {
        padding: 0px 15px;
    }

    .lorR {
        margin-left: 15px;
    }

    .lorR a {
        color: #fff;
        font-size: 18px;
    }

    .user_top {
        padding-top: 5px;
        align-items: center;
        display: flex;
        margin-bottom: 20px;
    }

    .user_right {
        margin-left: 10px;
        color: #fff;
        font-size: 14px;
    }

    .vip {
        box-sizing: content-box;
        display: flex;
        padding: 5px 15px;
        justify-content: space-between;
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
        background-color: rgb(38, 38, 38);
        height: 40px;
    }

    .vip_left,
    .vip_right {
        font-size: 12px;
        display: flex;
        align-items: center;
        color: #fff;
    }

    .vip_left span,
    .vip_right span {
        margin-left: 5px;
    }

    .level {
        color: #000;
        line-height: 20px;
        text-align: center;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background-color: rgb(240, 204, 136);
    }

    .vip_right button {
        margin-left: 10px;
        color: #000;
        border: none;
        border-radius: 25px;
        background-color: rgb(240, 204, 136);
        height: 20px;
        font-size: 12px;
    }

    .list {
        margin-bottom: 8px;
        padding: 0px 8px;
    }

    .list_container {
        background-color: #fff;
        padding: 0px 12px;
    }

    .list p {
        padding-top: 10px;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
    }

    .list p span:nth-child(2) {
        color: gray;
    }

    .van-grid-item__icon {
        color: rgb(244, 130, 71);
    }

    .van-grid-item__text {
        color: #000 !important;
    }

    .list:nth-last-child(1) {
        margin-bottom: 50px;
    }

    .gray .van-grid-item__icon {
        color: rgb(119, 119, 119);
    }
</style>